<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>09_盒子模型-细节说明-内容溢出</title>
        <style>
            div {
                width: 400px;
                height: 200px;
                border: 1px solid black;

                /* 溢出显示 */
                /* overflow: visible; */

                /* 溢出隐藏 */
                /* overflow: hidden; */

                /* 滚动条 */
                /* overflow: scroll; */

                /* overflow: auto; */


                /* 水平方向的隐藏 但是垂直方向默认修改了auto */
                /* overflow-x: hidden; */

                /* 垂直方向隐藏  但是水平方向默认修改为auto */
                overflow-y: hidden;
            }

            div p {
                width: 1100px;
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, odit, consequatur ipsam cumque temporibus fugiat dolores expedita rerum aliquid tenetur similique atque dolor neque dignissimos iste impedit tempore ab assumenda!
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores tenetur autem magni cum, aspernatur ducimus a ea nostrum distinctio vitae, recusandae deserunt saepe. Id in error iusto praesentium saepe aliquam?</p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, odit, consequatur ipsam cumque temporibus fugiat dolores expedita rerum aliquid tenetur similique atque dolor neque dignissimos iste impedit tempore ab assumenda!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, odit, consequatur ipsam cumque temporibus fugiat dolores expedita rerum aliquid tenetur similique atque dolor neque dignissimos iste impedit tempore ab assumenda!
        </div>
    </body>
</html>